<!DOCTYPE html>
<html lang="zh_CN">
<head>

    <meta charset="UTF-8">

    <title>JsOCR</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Cache-Control" content="no-siteapp">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <meta name="theme-color" content="#363d4c">

    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./example.css">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111105357-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-111105357-1');
    </script>

</head>
<body>

    <main>
        <input type="file" accept="image/*" class="inputField" ref="inputField" @change="clickUpload">
        
        <div class="content" :class="{'show': showContent}">
            <section class="img">
                <img :src="imgSrc" alt="">
            </section>
            <section class="text">
                <div class="control">
                    <button class="copy" v-if="flags.enableCopy" data-clipboard-target="#copy-target">
                        <img src="img/copy.svg" alt="copy" title="Copy">
                    </button>
                </div>
                <textarea id="copy-target">{{ content }}</textarea>
            </section>
            <div class="close" @click.stop="clickClose">×</div>
        </div>

        <input type="checkbox" id="setting-switch">
        <label for="setting-switch" class="setting-switch"><img src="img/setting.svg" alt="Setting"></label>
        <section class="setting-cover">
            <div class="setting">
                <section class="cover">
                    <label for="token">Token</label>
                    <input type="text" id="token" class="token" :value="token" placeholder="Your Token">
                    <button @click="saveToken">Save</button>
                    <a href="http://ai.baidu.com/docs#/Auth/top" target="_blank" class="btn">Get-one</a>
                </section>
                <!-- <section class="cover">
                    <label for="cookie">Cookie</label>
                    <input type="text" id="cookie" class="cookie" :value="token" placeholder="Enter your weibo cookie to enable upload image.">
                    <button @click="saveToken">Save</button>
                    <a href="http://ai.baidu.com/docs#/Auth/top" target="_blank" class="btn">How-to-get</a>
                </section> -->
                <!-- <section class="cover">
                        <label for="">Flags</label>
                        
                </section> -->
            </div>
        </section>

        <div id="loading" :class="{'show': showLoading}"></div>
        <div class="alert" :class="{'show': showAlert}">{{ alertMsg }}</div>
    </main>
    

    <script>
        if (!'Promise' in window) {
            document.write('<script src="https:\/\/cdn.bootcss.com\/es6-promise\/4.1.1\/es6-promise.min.js\"><\/script>');
        }
        if (!'fetch' in window) {
            document.write('<script src="https:\/\/cdn.bootcss.com\/fetch\/2.0.3\/fetch.min.js"><\/script>');
        }
    </script>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script src="./example.js"></script>
    
</body>
</html>